{% extends "cmdb/mequipment/index.html" %}

{% block right_content %}
<div id="right_menu">
    <div>
        <button id="add" type="button" class="btn btn-info hint hint-top" data-toggle="modal" data-target="#addItem" data-hint="添加网络设备信息"><span class="glyphicon glyphicon-plus"></span></button>
        <form class="form-inline" style="float: right">
            <div class="form-group">
                <label for="serverRoomId">机房: </label>
                <select type="text" id="serverRoomId" class="form-control">
                    <option value="0">全部</option>
                    {% for single_room in server_room_list %}
                    <option value="{{ single_room.id }}" {% ifequal server_room_id single_room.id %} selected {% endifequal %}>{{ single_room.server_room }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label class="sr-only">Search</label>
                <input type="search" class="form-control" id="search" placeholder="序列号/管理IP/资产编号" value="{{ search }}" style="width:100%">
            </div>
            <button type="button" class="btn btn-primary" id="searchNet"><span class="glyphicon glyphicon-search"></span></button>
        </form>
    </div>
    <table id="example" style="table-layout:fixed;" class="table table-bordered table-hover">
        <thead >
        <td class="col">设备编号</td>
        <td class="col">设备型号</td>
        <td class="col">设备类型</td>
        <td class="col">机房</td>
        <td class="col">主机名</td>
        <td class="col">管理ip</td>
        <td class="col" style="width:20%">操作</td>
        </thead>
        {% if network_list %}
        {% for net in network_list %}
        <tr>
            <td class="col">{{ net.equipment_no }}</td>
            <td class="col">{{ net.equipment_model }}</td>
            <td class="col">{{ net.equipment_type }}</td>
            <td class="col">{{ net.server_room }}</td>
            <td class="col">{{ net.hostname }}</td>
            <td class="col">{{ net.manger_ip }}</td>
            <td class="col">
                <div>
                    <a class="edit_item mouse_pointer hint hint-top" data-eno="{{ net.equipment_no }}" data-toggle="modal" data-target="#editItem" data-hint="编辑网络设备信息">
                        <span class="glyphicon glyphicon-edit"></span>
                    </a>&nbsp;
                    <a data-eno="{{ net.equipment_no }}" class="mouse_pointer hint hint-top" data-toggle="modal" data-target="#lookItem" data-hint="网络设备详情">
                        <span class="glyphicon glyphicon-eye-open"></span>
                    </a>&nbsp;
                    <a data-eno="{{ net.equipment_no }}" class="delete_item mouse_pointer hint hint-top delete" data-hint="删除网路设备信息">
                        <span class="glyphicon glyphicon-trash"></span>
                    </a>&nbsp;
                </div>
            </td>
        </tr>
        {% endfor %}
        {% endif %}
    </table>

    <div>
        <span>跳转到
         <select class="pagei">
             {% for temppage in page_list %}
             <option value="{{ temppage }}" {% ifequal temppage page %}selected {% endifequal %}>{{ temppage }}</option>
             {% endfor %}
         </select>页
        </span>
        <span style="padding-left: 28%;">每页{{ page_num }}条，第{{ page }}页，共{{ count }}条，共{{ page_total }}页</span>
        <span style="float:right;padding-right:50px">
            <a class="word hint hint-top" href="{% url 'equipment:netinfo' %}?page=1&server_room_id={{ server_room_id }}&search={{ search }}" data-hint="首页"><span class="glyphicon glyphicon-fast-backward"></span></a>
            {% ifnotequal page 1 %}&nbsp;
            <a class="hint hint-top" href="{% url 'equipment:netinfo' %}?page={{ page|add:-1 }}&server_room_id={{ server_room_id }}&search={{ search }}" data-hint="点击跳转到上一页"><span class="glyphicon glyphicon-step-backward"></span></a>
            {% endifnotequal %}
            {% ifnotequal page page_total %}&nbsp;
            <a class="hint hint-top" href="{% url  'equipment:netinfo' %}?page={{ page|add:1 }}&server_room_id={{ server_room_id }}&search={{ search }}" data-hint="点击跳转到下一页"><span class="glyphicon glyphicon-step-forward"></span></a>
            {% endifnotequal %}&nbsp;
            <a class="word hint hint-top" href="{% url 'equipment:netinfo' %}?page={{ page_total }}&server_room_id={{ server_room_id }}&search={{ search }}" data-hint="尾页"><span class="glyphicon glyphicon-fast-forward"></span></a>&nbsp;
        </span>
    </div>
</div>

<!-- 模态框（Modal）编辑用户资料 -->
<div class="modal fade" id="lookItem" tabindex="-1" role="dialog" aria-labelledby="lookItemLabel">
    <div class="modal-dialog">
        <div class="modal-content" style="width:800px">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    详情
                </h4>
            </div>
            <div class="modal-body">

                <table class="table table-bordered table-hover">
                    <thead>
                        <td class="col1">设备型号</td>
                        <td class="col2">设备类型</td>
                        <td class="col3">设备版本</td>
                        <td class="col4">主机名</td>
                        <td class="col5">管理ip</td>
                        <td class="col6">资产编号</td>
                    </thead>
                    <tr>
                        <td class="col1" id="equipment_model"></td>
                        <td class="col2" id="equipment_type"></td>
                        <td class="col3" id="equipment_ver"></td>
                        <td class="col4" id="hostname"></td>
                        <td class="col5" id="manger_ip"></td>
                        <td class="col6" id="asset_number"></td>

                    </tr>
                </table>

                <table class="table table-bordered table-hover">

                    <thead>
                        <td class="col1">所在机房</td>
                        <td class="col2">机柜</td>
                        <td class="col3">占用U数</td>
                        <td class="col4">起始机柜位置</td>
                        <td class="col5">终止机柜位置</td>
                        <td class="col6">序列号</td>
                    </thead>
                    <tr>
                        <td class="col1" id="server_room"></td>
                        <td class="col2" id="cabinet"></td>
                        <td class="col3" id="occupy_u"></td>
                        <td class="col4" id="start_cabinet"></td>
                        <td class="col5" id="end_cabinet"></td>
                        <td class="col6" id="serial_num"></td>
                    </tr>

                </table>

                <table class="table table-bordered table-hover">
                    <thead>
                        <td class="col1">采购日期</td>
                        <td class="col2">维保到期日</td>
                        <td colspan="4">备注</td>
                    </thead>
                    <tr>
                        <td class="col1" id="purchase_time"></td>
                        <td class="col2" id="maint_end_time"></td>
                        <td colspan="45" id="comment"></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
$(".pagei").change(function(){
        var index=$(this).children('option:selected').val();
        var search = $("#search").val();
        window.location.href="{% url 'equipment:netinfo' %}?page=" +index + "&server_room_id={{ server_room_id }}" + "&search=" + search;
    });
$("#add").click(function(){
    window.location.href="{% url 'equipment:netaddinfo' %}";
});
$(".edit_item").click(function(){
    var eNo = $(this).data("eno");
    window.location.href="{% url 'equipment:neteditinfo' %}?page=" + {{ page }} + "&eno="+eNo;;
});
$(".delete_item").click(function(){
    if(confirm("确定要删除吗？删除操作不可恢复！")) {
           var eNo = $(this).data("eno");
           var urls = "{% url 'equipment:netdelete' %}";
           var postdata = {eNo:eNo}
           var jsonstr = $.ajax({
			    url : urls,
			    type : "POST",
			    data : postdata,
			    async : false,
			    cache : false
		    });
	     var jsonobj = eval('(' + jsonstr.responseText + ')');
		  if(jsonobj.status==0){
		      alert(jsonobj.message);
		  }else{
              window.location.reload();
          }
     }
});

$("#lookItem").on('show.bs.modal',function(event){
    var button = $(event.relatedTarget);
    var eNo = button.data("eno");
    var urls = "{% url 'equipment:netget' %}";
    postdata = {eNo:eNo};
    var jsonstr = $.ajax({
        url : urls,
		type : "POST",
		data : postdata,
		async : false,
		cache : false
	});
	var jsonobj = eval('(' + jsonstr.responseText + ')');
	if(jsonobj.status==0){
		    alert(jsonobj.message);
	}else{
	    $(this).find('#equipment_model').html(jsonobj.data.equipment_model);
	    $(this).find('#equipment_type').html(jsonobj.data.equipment_type);
	    $(this).find('#equipment_ver').html(jsonobj.data.equipment_ver);
	    $(this).find('#hostname').html(jsonobj.data.hostname);
	    $(this).find('#manger_ip').html(jsonobj.data.manger_ip);
	    $(this).find('#asset_number').html(jsonobj.data.asset_number);
	    $(this).find('#server_room').html(jsonobj.data.server_room);
	    $(this).find('#cabinet').html(jsonobj.data.cabinet);
	    $(this).find('#occupy_u').html(jsonobj.data.occupy_u);
	    $(this).find('#start_cabinet').html(jsonobj.data.start_cabinet);
	    $(this).find('#end_cabinet').html(jsonobj.data.end_cabinet);
	    $(this).find('#serial_num').html(jsonobj.data.serial_num);
	    $(this).find('#purchase_time').html(jsonobj.data.purchase_time);
	    $(this).find('#maint_end_time').html(jsonobj.data.maint_end_time);
	    $(this).find('#comment').html(jsonobj.data.comment);
	}
});

$("#searchNet").click(function(){
    var search = $("#search").val();
    var searchRoomId = $("#serverRoomId").val();
    window.location.href="{% url 'equipment:netinfo' %}?server_room_id=" + searchRoomId + "&search=" + search;
});

</script>
{% endblock  %}

